import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
import { useEffect } from 'react'
import { useIdentityStore } from '@/stores/identityStore'
import { useShallow } from 'zustand/react/shallow'

export const Route = createLazyFileRoute('/')({
	component: IndexPage,
})

function IndexPage() {
	// const info = useIdentityStore.use.info()
	// const removeInfo = useIdentityStore.use.removeInfo()

	const { info, removeInfo } = useIdentityStore(
		useShallow(state => ({
			info: state.info,
			removeInfo: state.removeInfo,
		}))
	)

	const navigate = useNavigate()

	useEffect(() => {
		if (!info.token) {
			navigate({ to: '/login' })
		}
	}, [])

	const handleLogout = () => {
		removeInfo()
		window.location.reload()
	}

	return (
		<div>
			<div className="p-2 bg-red-400">
				<h3>Welcome Home!</h3>
			</div>
			<div>
				<button onClick={handleLogout}>退出</button>
			</div>
		</div>
	)
}
